<template>
  <div>
    <!-- 信息概要 -->
    <div class="act-info">
      <a-row>
        <a-col :span="24">
          <a-card hoverable :loading="loading" class="act-info-card">
            <template class="actions" slot="actions">
              <span>
                <a-icon type="pay-circle" />&nbsp;原价 :
                <b>
                  <del>&nbsp;{{info&&info.price||0}}&nbsp;</del>
                </b>
              </span>
              <span>
                <a-icon type="pay-circle" />&nbsp;现价 :
                <b>￥{{info&&info.payprice||0}}</b>
              </span>
            </template>
            <a-card-meta :description="deadline"></a-card-meta>
          </a-card>
        </a-col>
      </a-row>
      <a-row class="act-user">
        <a-col :span="24" class="act-payer">
          <p class="tit">支付用户 （{{ordersCount}}）</p>
          <a-skeleton class="skeleton" v-if="!payer.length" avatar :paragraph="{rows: 1}" />
          <!-- 因ant design for vue 走马灯自动轮播与计时器发生冲突而做出的妥协，另形成组件-->
          <Payer v-else-if="payer" :payer='payer' />
        </a-col>
        <a-col :span="24">
          <p class="tit">参与用户 （{{userCount}}）</p>
          <a-skeleton class="skeleton" v-if="!joiner.length" avatar :paragraph="{rows: 1}" />
          <div v-else class="user-panel">
            <div class="box">
              <div v-for="(item,index) in joiner" v-if="index<16" :key="index" class="avatar">
                <a-avatar :src="item.headimgurl" :size="29" />
                <span class="elli">{{item.nickname}}</span>
              </div>
              <!-- <div class="more">更多参与者<br/>﹀</div> -->
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { constants } from "crypto";
import Payer from './Payer'
export default {
  name: "ActInfo",
  data() {
    return {
      carpusel: [],
      info: {},
      joiner: [],
      payer: [],
      ordersCount:0,
      userCount:0,
      loading: true,
      deadline: "",
      passed: false
    };
  },
  props: ["actData"],
  methods: {
    onChange(a, b, c) {
      console.log(a, b, c);
    },
    actDeadline() {
      let vo = this;
      let curr = new Date().getTime();
      let endtime = vo.info ? new Date(vo.info.endtime.replace(/-/g,'/')).getTime() : 0;
      if (endtime - curr < 0) {
        vo.deadline = "该活动已结束";
        return;
      } else {
        var timediff = Math.round((endtime - curr) / 1000), //获取还剩多少天
          day = parseInt(timediff / 3600 / 24), //获取还剩多少小时
          hour = parseInt((timediff / 3600) % 24), //获取还剩多少分钟
          minute = parseInt((timediff / 60) % 60), //获取还剩多少秒
          second = timediff % 60;
        vo.deadline = `距结束：${day}天 ${hour}小时 ${minute}分钟 ${second}秒`;
        vo.timeName = setTimeout(vo.actDeadline, 1000);
      }
    }
  },
  beforeDestroy(){
    clearInterval(this.timeName)
  },
  watch: {
    actData() {
      let vo = this;
      vo.carpusel = vo.actData.carpusel;
      vo.info = vo.actData.info;
      vo.joiner = vo.actData.joiner;
      vo.payer = vo.actData.payer;
      vo.ordersCount = vo.actData.ordersCount;
      vo.userCount = vo.actData.userCount;
      vo.loading = false;
      vo.actDeadline();
    }
  },
  components:{
    Payer
  }
};
</script>
<style lang='less' scoped>
/* 栅格 */
.act-user {
  margin-top: 5px;
  background: #fafafa;
  border-radius: 4px;    
  overflow: hidden;
  .ant-collapse{
    border: 0;
  }
  .tit{
    text-align: left;
    line-height: 1;
    padding: 10px 15px;
    margin: 0;
    background: #fafafa;
  }
}
/* 支付人*/
.act-payer {
  border: 0;
  background: #fff;
  color: #333;
  .tit {
    text-align: left;
    line-height: 1;
    padding: 10px 15px;
    margin: 0;
    background: #fafafa;
  }
  .ant-carousel{
    // background: #333;
  }
}
/* 信息概要 */
.act-info{
  padding: 0 5px;
  
}
.act-info-card {
  margin-top: -4px;
  border-radius: 4px;
  border:0;
  text-align: center;
  /deep/.ant-card-actions{
    background: #f44336!important;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    li{
      color: #fff;
      span{
        font-size: 18px;
      }
    }
    :after{
      height:0!important;
    }
  }
}
/deep/.ant-card-loading:after{
  height: 0;
}
/deep/.ant-card{
.ant-card-loading:after {
  height: 0;
}
.ant-card-actions{
  li{
    font-size: 20px;
    span:hover{
      color: #fff!important;
    }
  }
}
.ant-card-meta-description{
  font-size: 20px;
  font-weight:bold;
  color:#f5222d;
}
}

/* 活动相关用户 */
.act-user {
  .skeleton {
    padding: 15px;
    background: #fff;
  }
  .avatar {
    width: 12%;
    float: left;
    text-align: center;
    margin-top: 5px;
  }
  .user-panel {
    background: #fff;
    margin-top: -1px;
    .box{
      overflow: hidden;
      .more{
        font-size: 14px;
        color: #a2a2a2;
        padding-top: 10px;
        clear: both;
      }
    }
  }
  .ant-collapse-content {
    background: inherit !important;
  }
  .ant-collapse-content-box {
    overflow: hidden;
    .ant-collapse-item-active {
      padding-bottom: 15px;
    }
  }
}

.elli {
  display: inline-block;
  width: 100%;
  min-height: 21px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*代金券*/
</style>
